<template>
  <div class="seat-table">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input placeholder="请输入行数" v-model="formInline.row" />
      </el-form-item>
      <el-form-item  label="X">
        <el-input placeholder="请输入列数" v-model="formInline.col" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createSeat">生成</el-button>
      </el-form-item>
    </el-form>
    <table class="seat">
      <tbody>
        <tr v-for="(item, index) in seat" :key="index">
          <td
            v-for="(columnItem, columnIndex) in item"
            :key="columnIndex"
            :style="{
              width: 100 / item.reduce((prev, child) => prev + child.length, 0) * columnItem.length + '%'
            }"
          >
            <div v-for="(studentItem, studentIndex) in columnItem" :key="studentIndex" @mouseenter="showHoveLine($event, columnIndex, studentIndex)">
              <input v-model="studentItem.name" />
            </div>
          </td>
        </tr>
      </tbody>
      <div class="hover-line" v-show="isShowLine" ref="hoverLine" @mouseleave="isShowLine = false" @click="createAisle"></div>
    </table>
    <el-button type="primary" style="margin-top: 20px;" @click="isEditSeat = !isEditSeat">
      {{isEditSeat ? '完成标记' : '标记过道'}}
    </el-button>
    <el-button type="primary" style="margin-top: 20px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
import storage from '@/utils/storage'

export default {
  name: 'edit-seat-table',
  data () {
    return {
      isShowLine: false,
      isEditSeat: false,
      groupIndex: 0,
      itemIndex: 0,
      formInline: {
        row: 10,
        col: 8
      },
      seat: storage.getItem('seat') || []
    }
  },
  created () {
    this.createSeat()
  },
  methods: {
    createSeat () {
      const seat = []
      for (let i = 0; i < this.formInline.row; i++) {
        const row = [
          []
        ]
        for (let j = 0; j < this.formInline.col; j++) {
          row[0].push({
            name: ''
          })
        }
        seat.push(row)
      }
      console.log(seat)
      this.seat = seat
    },
    showHoveLine (e, groupIndex, itemIndex) {
      console.log(groupIndex, itemIndex)
      if (!this.isEditSeat) return
      this.groupIndex = groupIndex
      this.itemIndex = itemIndex
      this.isShowLine = true
      this.$refs.hoverLine.style.width = e.target.clientWidth + 'px'
      this.$refs.hoverLine.style.left = e.target.offsetLeft + e.target.offsetParent.offsetLeft + 'px'
    },
    createAisle () {
      this.seat.forEach(item => {
        if (item[this.groupIndex][this.itemIndex + 1]) {
          const group1 = item[this.groupIndex].slice(0, this.itemIndex + 1)
          const group2 = item[this.groupIndex].slice(this.itemIndex + 1)
          item.splice(this.groupIndex, 1, group1, group2)
        } else {
          const group1 = item[this.groupIndex]
          const group2 = item[this.groupIndex + 1]
          item.splice(this.groupIndex, 2, [...group1, ...group2])
        }
        this.isShowLine = false
        // console.log(group1, group2, item[this.groupIndex])
      })
    },
    next () {
      storage.setItem('seat', this.seat)
      console.log(this.$parent)
      this.$parent.$parent.initActive = 2
    }
  }
}
</script>

<style lang="scss" scoped>
.seat-table {
  margin: 40px 80px;
  tbody {
    width: 100%;
    tr {
      overflow: hidden;
    }
    td {
      display: flex;
      float: left;
      padding: 0 10px;
      box-sizing: border-box;
      div {
        display: block;
        flex: 1;
        font-size: 12px;
        color: #1FC6FF;
        line-height: 30px;
        height: 30px;
        float: left;
        border: 1px solid #1FC6FF;
        margin-left: -1px;
        margin-bottom: -1px;
        display: flex;
        text-align: center;
        input {
          border: 0;
          background: transparent;
          outline: none;
          padding: 0 10px;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
  table {
    position: relative;
    width: 100%;
    text-align: center;
    border-spacing: 0;/**设置相邻单元格的边框间的距离**/
    color:#5a5a5a;
    &.seat {
      td:first-child {
        text-align: left;
      }
      td:last-child {
        text-align: right;
      }
    }
  }
  table td,table th{
    white-space: nowrap;/**不换行**/
    text-overflow: ellipsis;/**溢出不可见部分使用...代替**/
}
}
.hover-line {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(31, 199, 255, 0.35);
  width: 20px;
  z-index: 0;
}

.histiry-achievement {
  margin-top: 20px;
  thead {
    th {
      background: rgba(31, 198, 255, 0.2);
      line-height: 40px;
      font-size: 12px;
      text-align: left;
      padding-left: 10px;
      color: #B4C0CC;
    }
  }
  tbody {
    td {
      line-height: 40px;
      font-size: 12px;
      text-align: left;
      padding-left: 10px;
      color: #fff;
    }
  }
}
.outher-chart {
  display: flex;
  & > div{
    width: 50%;
    flex-shrink: 0;
  }
}
</style>
